<script setup>
import {reactive} from "vue";
const props = defineProps({
  content: {
    type: String,
    default: "",
  },
  isFromUser:{
    type:Boolean,
    default:''
  }
})
let messageUser=reactive({
  backgroundColor: 'white',
  color: 'rgb(102,102,102)',
})
let messageJiuWen=reactive({
  backgroundColor: 'rgb(64,158,255)',
  color: 'white',
})
</script>

<template>
  <div class="message animate__animated animate__fadeInUp">
    <img class="jiuWen" src="../../../assets/Avatar.png" alt="头像" v-if="!props.isFromUser">
    <img class="user" src="../../../assets/User.png" alt="头像" v-if="props.isFromUser">
    <div v-html="props.content" class="content" :style="props.isFromUser? messageUser:messageJiuWen"
         v-loading="props.content===''"  element-loading-background="rgb(244,244,244)">
    </div>
  </div>
</template>

<style scoped>
  .message{
    width: 100%;
    height: auto;
    margin: 8px auto;
    display: flex;

  }
  .content{
    margin-left: 10px;
    font-size: medium;
    margin-top: 30px;
    width: fit-content;
    text-align: left;
    max-width: 100%;
    height: fit-content;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
    padding: 10px;
  }

  .jiuWen{
    width: 50px;
    height: 50px;
    display: block;
  }
  .user{
    width: 50px;
    height: 50px;
    display: block;
  }
</style>